<template>
	<view class="content">
		<view class="close">
			<text>是否关闭需求</text>
			<view style="display: flex;align-items: center;">
				<text>开启</text>
				<u-switch @change="changeSWi" :disabled="disabiles" style="margin: 0 10rpx;" active-color='#999' inactive-color="#ff7257" v-model="checked"></u-switch>
				<text>关闭</text>
			</view>
		</view>
		<view class="bigBox">
			<view class="tis">
				<text>温馨提示：以下是平台给您推荐的家教老师，请在有效的时间内选择试课， 支持选择多位老师试课，为了保证教学效果，请在平台进行课费支付！</text>
			</view>
			<view class="teacher">
				<view class="tab">
					<view :class="current===index ? 'one' :'another'" @click="change(index)"
						v-for="(item,index) in list" :key="index">
						{{item.name}}
					</view>
				</view>
				<view v-if="current==0" style="padding-top: 52rpx;">
					<view class="list" style="margin: 0 30rpx 36rpx; "
						v-for="item in orderDetail.educationOrderApplyVOList" @tap="goDetail(item.teacherId)">
						<view class="des">
							<view class="left">
								<view class="avatar">
									<u-avatar size="131" :src="item.teacherVO.bareheadedPhoto"></u-avatar>
									<p>ID：{{item.teacherVO.code}}</p>
								</view>
								<view class="name">
									<view class="">
										<text
											style="font-size: 34rpx;font-weight: bold;color: #333333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 90rpx;text-align: left;">{{item.teacherVO.realName}}</text>
										<image style="width: 31rpx;
						height: 31rpx;margin: 0 15rpx 0 10rpx; vertical-align: middle;" src="../../static/image/women.png" mode=""
											v-if="item.teacherVO.gender==2">
										</image>
										<image style="width: 31rpx;
								height: 31rpx;margin: 0 15rpx 0 10rpx; vertical-align: middle;" src="../../static/image/man.png" mode=""
											v-if="item.teacherVO.gender==1">
										</image>
										<text
											style="font-size: 26rpx;color: #333333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 150rpx;">{{item.teacherVO.categoryList[0].categoryName}}</text>
									</view>
									<p class="school">{{item.teacherVO.graduateSchool}}-{{item.teacherVO.speciality}}
									</p>

								</view>
							</view>
							<view class="right" style="position: relative;">
								<view style="    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;">
									<text style="font-size: 26rpx;font-weight: bold;color: #FF6B55;">￥</text>
									<text
										style="font-size: 40rpx;font-weight: bold;color: #FF6B55;">{{orderDetail.auditParentPrice}}</text>
									<text style="font-size: 26rpx;font-weight: bold;color: #FF6B55;">/小时</text>
								</view>
								<view style="position: absolute;right: 0;top: 78rpx;">
									<image style="width: 13rpx;height: 17rpx;margin-right: 10rpx;"
										src="../../static/image/address.png" mode=""></image>
									<text>{{item.teacherVO.distance}}</text>
								</view>
							</view>
							<view
								style="display: flex; align-items: center;position: absolute;bottom: 34rpx;left: 190rpx;">
								<p class="education" v-for="items in item.teacherVO.categoryList">
									{{items.categoryName}},
								</p>
							</view>
						</view>
						<view class="foot">
							<view class="time" style="display: flex;align-items: center;">
								剩余：<u-count-down separator="zh" :show-days="true" :show-hours="true"
									:show-seconds="true" :timestamp="item.surplusTime"></u-count-down>
							</view>

							<view v-if="item.status==2" class="agreen">
								已选中
							</view>
							<view v-else class="agreen" @tap.stop="agreen(item.id)">
								同意试课
							</view>
						</view>

					</view>
					<u-empty v-if="orderDetail.educationOrderApplyVOList==null" text="目前还没老师应聘，需加急可联系客服帮忙跟进"
						mode="list"></u-empty>
				</view>
				<view v-if="current==1" style="padding-top: 52rpx;">
					<view style="padding: 0 30rpx 150rpx;">
						<view class="introduce">
							<h5>学员信息</h5>
							<view class="introduce-item">
								<text class="color">学生姓名</text>
								<text class="yes">{{orderDetail.studentName}}</text>
							</view>
							<view class="introduce-item">
								<text class="color">学生性别</text>
								<text class="yes">{{orderDetail.gender==1 ? '男' : '女'}}</text>
							</view>
							<view class="introduce-item">
								<text class="color">学生年级</text>
								<text class="yes">{{orderDetail.studyGradeName}}</text>
							</view>
							<view class="introduce-item">
								<text class="color">学生情况</text>
								<text class="yes">{{orderDetail.studySituation}}</text>
							</view>
						</view>
						<view class="introduce">
							<h5>辅导信息</h5>
							<view class="introduce-item">
								<text class="color">辅导科目</text>
								<text class="yes">{{orderDetail.counsellingSubjectName ||'--'}}</text>
							</view>
							<view class="introduce-item">
								<text class="color">科目备注</text>
								<text class="yes">{{orderDetail.subjectRemark||'无'}}</text>
							</view>
							<view class="introduce-item" v-if="orderDetail.trialTimeName">
								<text class="color">辅导次数</text>
								<text class="yes">{{orderDetail.trialTimeName}}</text>
							</view>
							<view class="introduce-item">
								<text class="color">辅导时长</text>
								<text class="yes">{{orderDetail.counsellingDurationName}}</text>
							</view>
							<view class="introduce-item">
								<text class="color">时薪范围</text>
								<text class="yes">{{orderDetail.salaryMin}}-{{orderDetail.salaryMax}}元/小时</text>
							</view>
							<view class="introduce-item">
								<text class="color">可授课时间段</text>
								<view class="">
									<view v-for="item in teacherDay" :key="item.id" class="yes">{{item.weekDay}}
										{{item.startDate}}
									</view>
								</view>
							</view>
						</view>
						<view class="introduce">
							<h5>老师要求</h5>
							<view class="introduce-item">
								<text class="color">老师性别</text>
								<text
									class="yes">{{orderDetail.teacherGender==1?'男' :orderDetail.teacherGender==2?'女':orderDetail.teacherGender==0?'男女不限':''}}</text>
							</view>
							<view class="introduce-item">
								<text class="color">老师类型</text>
								<text class="yes">{{orderDetail.teacherTypeName}}</text>
							</view>
							<view class="introduce-item">
								<text class="color">对老师的要求</text>
								<text class="yes">{{orderDetail.teacherAsk}}</text>
							</view>
						</view>
						<view class="introduce">
							<h5>联系信息</h5>
							<view class="introduce-item">
								<text class="color">联系人姓名</text>
								<text class="yes">{{orderDetail.linker}}</text>
							</view>
							<view class="introduce-item">
								<text class="color">联系人电话</text>
								<text class="yes">{{orderDetail.linkerPhone}}</text>
							</view>
							<view class="introduce-item">
								<text class="color">授课地点</text>
								<text class="yes">{{orderDetail.teachType==1?'上门授课':'线上授课'}}</text>
							</view>
							<view class="introduce-item" v-if="orderDetail.teachType==1">
								<text class="color">授课地址</text>
								<text class="yes">{{orderDetail.placeRemark}}</text>
							</view>
						</view>
						<view
							style="display: flex; align-items: center; justify-content: space-between; margin-top: 42rpx;">
							<text class="color">课程ID：{{orderDetail.code}}</text>
							<text class="color">发布时间：{{orderDetail.createTime}}1</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="bgc">
					<view class="know">
						<text>试课须知</text>
						<view>
							正确的学习方法+努力+坚持+进步!本人重点高中在职教师，11年教学经验，讲课通熟易懂，层次清晰，罗辑思雯严密，辅导学生99%以上取得巨大进步。8年的家教经验辅导了上千个学生。普于针对不同的学生，作出不同的教学方法。
						</view>
					</view>
					<view class="sub">
						<view class="back">
							返回
						</view>
						<view class="pay" @tap.stop="payDetail(orderDetail)">
							去支付
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<u-mask :show="shows">
			<view class="warp">
				<view class="bgcs">
					<view class="" style="padding: 0 45rpx;">
						<text style="font-size: 30rpx;color: #333333;">若关闭需求，将不再接受老师的投递，且无法选择老师试课，请是否要确认关闭？</text>
					</view>
					<view class="btn">
						<view class="back" @tap="back">
							返回
						</view>
						<view class="yes" @tap="yes">
							确认
						</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import utils from '@/common/utils.js';
	export default {
		data() {
			return {
				disabiles: false,
				checked: false,
				show: false,
				shows: false,
				list: [{
						name: '老师'
					},
					{
						name: '课程详情'
					},
				],
				current: 0,
				id: '',
				dealResult: 1,
				orderDetail: {},
				teacherDay: [],
				applyId: '',
				day: '',
				days: '',
				hours: '',
				minutes: '',
				seconds: '',
				img: '',
				teacherId:''

			};
		},
		onLoad(options) {
			this.current = options.current
			this.id = options.id
			this.getOrderDetail()
			this.salary()

		},
		methods: {
			getBack(num){
				this.current=num
				this.getOrderDetail()
			},
			back() {
				this.checked = false
				this.shows = false
			},
			async yes() {
				const res = await this.$u.api.closeOrder({
					orderId: this.id
				})
				this.disabiles = true
				this.$u.toast('已关闭')
				this.checked = true
				this.shows = false
			},
			
			async salary() {
				const res = await this.$u.api.kefu({
					code: 'SALARY_REFERENCE'
				})
				this.img = res.description
			},
			// switch打开或者关闭时触发，值为true或者false
			// 即使不监听此事件，this.checked此时也会相应的变成true或者false
			async changeSWi(status) {

				if (status === true) {
					this.shows = true


				}

			},
			change(index) {
				this.current = index;
			},
			goDetail(teacherId) {
				uni.navigateTo({
					url: `/pages/contradict/teacherDetail?teacherId=${teacherId}&type=1`
				})
			},
			payDetail(orderDetail) {
				uni.navigateTo({
					url: `/pagesShop/payDetail/payDetail?pay=${JSON.stringify(orderDetail)}&teacherId=${this.teacherId}`
				})
				this.show=false
			},
			async getOrderDetail() {
				this.orderDetail = await this.$u.api.getOrderDetail({
					id: this.id
				})
				if (this.orderDetail.status == 99) {
					this.checked = true
					this.disabiles = true
				}
				console.log(this.orderDetail.educationOrderDateList);
				this.teacherDay = this.orderDetail.educationOrderDateList
				if(this.orderDetail.educationOrderApplyVOList){
					this.orderDetail.educationOrderApplyVOList.map(item => {
						if (item.teacherVO.distance >= 1000) {
							item.teacherVO.distance = (item.teacherVO.distance / 1000).toFixed(2) + 'km'
						} else if (item.teacherVO.distance < 1000) {
							item.teacherVO.distance = item.teacherVO.distance + 'm'
						}
					})
				}

				this.day = this.orderDetail.educationOrderApplyVOList
			},
			async agreen(id) {
					this.show = true
					this.teacherId = id
				// this.$u.api.agreenTeacher({
				// 	applyId: id,
				// 	orderId: this.id,
				// 	payAmount: this.orderDetail.totalAmount
				// }).then(data => {

				// 	utils.doPay(data, function(a) {
				// 		if (a) {
				// 			uni.showToast({
				// 				title: '恭喜支付成功',
				// 				icon: ''
				// 			})
				// 			uni.navigateBack({
				// 				delta: 1
				// 			})
				// 		} else {
				// 			uni.navigateBack({
				// 				delta: 1
				// 			})
				// 		}
				// 	})
				// })
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f7f7f7 !important;
	}

	h5 {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.color {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.yes {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.bgcs {
			padding-top: 302rpx;
			background-image: url('https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%AE%BE%E5%A4%87/%E8%89%B2%E5%BD%A9%E5%B9%B3%E8%A1%A1%201%402x.png');
			background-repeat: no-repeat;
			background-size: cover;
			width: 622rpx;
			height: 614rpx;

			.btn {
				margin-top: 90rpx;
				padding: 0 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.back {
					width: 235rpx;
					height: 80rpx;
					background: #FFFFFF;
					border: 1px solid #FF7157;
					border-radius: 40rpx;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF6C55;
					text-align: center;
					line-height: 80rpx;
				}

				.yes {
					width: 235rpx;
					height: 80rpx;
					background: linear-gradient(-90deg, #FF8D5F, #FF6A55);
					border-radius: 40rpx;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 80rpx;
				}
			}
		}

		.bgc {
			padding: 246rpx 64rpx 95rpx;
			width: 622rpx;
			height: 834rpx;
			background-repeat: no-repeat;
			background-size: contain;
			background-image: url('');

			.know {
				text-align: center;

				view {
					margin-top: 50rpx;
					text-align: left;
					width: 489rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
				}
			}

			.sub {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 115rpx;

				.back {
					width: 235rpx;
					height: 80rpx;
					background: #FFFFFF;
					border: 1px solid #FF7157;
					border-radius: 40rpx;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF6C55;
					text-align: center;
					line-height: 80rpx;
				}

				.pay {
					width: 235rpx;
					height: 80rpx;
					background: linear-gradient(-90deg, #FF8D5F, #FF6A55);
					border-radius: 40rpx;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 80rpx;
				}
			}
		}
	}

	.close {
		height: 130rpx;
		background: #FFFFFF;
		padding: 0 39rpx 0 37rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		view {
			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}

	.bigBox {
		margin-top: 12rpx;
		// background: #FFFFFF;

		.tis {
			text-align: center;
			padding: 47rpx 47rpx 0;

			text {
				font-size: 27rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ff7b5a;
				line-height: 40rpx;
			}
		}

		.teacher {
			margin-top: 57rpx;

			.tab {
				// padding: 0 6rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto;
				margin-top: 52rpx;
				width: 328rpx;
				height: 84rpx;
				background: #fbedea;
				border-radius: 42rpx;

				.one {
					width: 170rpx;
					height: 84rpx;
					background: #FF7157;
					border-radius: 42rpx;
					text-align: center;
					line-height: 84rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #fff;
				}

				.another {
					width: 150rpx;
					height: 84rpx;
					text-align: center;
					line-height: 84rpx;
					font-size: 28rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333;
				}
			}
		}

		.education {


			font-size: 26rpx;
			color: #333333;
		}

		.list {

			height: 392rpx;
			background: #FFFFFF;
			border: 1px solid #E5E5E5;
			box-shadow: 0rpx 13rpx 32rpx 0rpx rgba(182, 181, 181, 0.23);
			border-radius: 20rpx;

			.des {
				position: relative;
				height: 250rpx;
				border-bottom: 1rpx solid #eeeeee;
				padding: 40rpx 34rpx 42rpx 30rpx;
				display: flex;
				justify-content: space-between;


				.left {
					// position: relative;
					display: flex;

					.avatar {
						margin-right: 30rpx;
						text-align: center;

						p {
							font-size: 22rpx;
							color: #333333;
							margin-top: 10rpx;
						}
					}

					.name {

						// display: flex;
						view {
							display: flex;
							align-items: center;
						}

						.school {
							margin-top: 32rpx;
							margin-bottom: 33rpx;
							font-size: 26rpx;
							color: #333333;
						}

					}
				}

				.right {}
			}
		}

		.foot {
			padding: 0 19rpx 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 142rpx;

			.time {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.agreen {
				width: 180rpx;
				height: 60rpx;
				background: linear-gradient(-90deg, #FF8D5F, #FF6A55);
				border-radius: 30rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 60rpx;
			}
		}

		.introduce {
			padding: 0 30rpx;
			padding-top: 50rpx;
			background: #FFFFFF;
			border: 1px solid #EEEEEE;
			box-shadow: 0rpx 13rpx 95rpx 0rpx rgba(182, 181, 181, 0.23);
			border-radius: 10rpx;
			margin-bottom: 23rpx;

			.introduce-item {
				// height: 121rpx;
				padding: 50rpx 0 46rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #eee;
			}
		}
	}
</style>